<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--<link rel="stylesheet" href="/css/element-ui.css">-->
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--<script src="/js/vue.js"></script>-->
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--<script src="/js/element-ui.js"></script>-->

<!--<script type="application/javascript">
    function checkPermission() {
        if (!('Notification' in window)) {
            console.warn("当前浏览器不支持通知功能，请使用Chrome内核等浏览器");
        } else if (Notification.permission !== 'granted') {
            Notification.requestPermission(function (permission) {
                if (permission !== 'granted') {
                    console.log('用户禁止了浏览器通知功能')
                }
            });
        }
    }

    function playSound (src) {
        var sound = document.getElementById("sound-play");
        console.log(sound)
        sound.src = src
    }

    function notify() {
        var option = {
            body: '图标路径可以是以http或https开头的网络图片，如：,图标大小不超过 30 k; 也可以是位于drawable资源文件夹的图标路径，如：；如果有此字段值，推送一定走极光自有通道下发。',
            tag: '',
            icon: 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/105578/40/5462/272206/5dedadffE08962f1d/f7e42d5007e9c9e4.jpg',
            data: {
                sound: 'https://www.w3school.com.cn/i/song.ogg',
                name: '通知参数'
            }
        }
        var notify = new Notification('热销产品', option)
        notify.onclick = function(e) {
            console.log('点击通知')
            console.log(e.target)
        }
        notify.onshow = function (e) {
            console.log('显示通知')
            console.log(e.target)
            var sound = e.target.data.sound
            playSound(sound)
        }
    }

    checkPermission()
</script>-->
<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
    }

    .el-badge {
        line-height: 20px;
        border: 1px black;
        margin-top: 10px;
        margin-right: 40px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        /*line-height: 160px;*/
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    .el-row {
        margin-bottom: 20px;
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

</style>
<body>
<div id="app">
    <el-button  v-if="!owner" @click="login" type="primary">匿名登录</el-button>
    <!-- 聊天展示 -->
    <el-container v-if="owner">
        <el-container>
            <el-header>
                匿名聊天
                <el-button type="danger" @click="logout" style="position: absolute; right: 10px;">登出</el-button>
            </el-header>
            <el-main v-for="msg in messageList">
                <div style="text-align: left" v-if="msg.cmd == 'chart' && msg.from.id != owner.id">
                    <span style="color: #99a9bf; font-size: small; display: block">{{ msg.date | dateFormat }}</span>
                    【{{ msg.from.name }}】: {{ msg.message }}
                </div>
                <div style="text-align: right" v-if="msg.cmd == 'chart' && msg.from.id == owner.id">
                    <span style="color: #99a9bf; font-size: small; display: block">{{ msg.date | dateFormat }}</span>
                    {{ msg.message }} :【{{ msg.from.name }}】
                </div>
                <div style="text-align: center" v-if="msg.cmd == 'notify' || msg.cmd == 'login'">
                    <span style="color: #99a9bf; font-size: small">{{ msg.message }}</span>
                </div>
            </el-main>
            <el-footer>
                <div>
                    <el-input placeholder="请输入内容" v-model="toSendMessage" @keyup.enter.native="sendMessage">
                        <el-button slot="append" type="primary" @click="sendMessage">发送S</el-button>
                    </el-input>
                </div>
            </el-footer>
        </el-container>
    </el-container>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: function() {
            return {
                owner: null,
                uri: 'ws://localhost:8800/chart',
                channel: null,
                toSendMessage: '',
                messageList: []
            }
        },
        filters: {
            dateFormat: function (t) {
                if (!t) {
                    return ''
                }
                var datetime = new Date(t)
                var year = datetime.getFullYear()
                var month = datetime.getMonth()
                var date = datetime.getDate()
                var hour = datetime.getHours()
                var minute = datetime.getMinutes()
                var seconds = datetime.getSeconds()
                var millisSecond = datetime.getMilliseconds()
                return `${year}-${month}-${date} ${hour}:${minute}:${seconds}.${millisSecond}`
            }
        },
        mounted: function () {
        },
        methods: {
            // 登入
            login: function () {
                this.channel = this.connect({
                    uri: this.uri,
                    onMessage: (e) => {
                        var data = JSON.parse(e.data)
                        switch (data.cmd) {
                            case 'chart':
                                this.doChart(data)
                                break;
                            case 'notify':
                                this.doNotify(data)
                                break;
                            case 'login':
                                this.doLogin(data)
                                break;
                            default:
                                console.log(e.data)
                        }
                    },
                    onClose: (e) => {
                        console.log('连接被关闭')
                        this.channel = null
                        this.owner = null
                    }
                })
            },
            doChart: function (data) {
                console.log('聊天： ' + JSON.stringify(data))
                this.messageList.push(data)
            },
            doNotify: function (data) {
                console.log('通知：' + data.message)
                this.messageList.push(data)
            },
            doLogin: function (data) {
                console.log('登录： ' + JSON.stringify(data))
                this.owner = data.session
                this.messageList.push(data)
            },
            // 登出
            logout: function () {
                this.channel.close()
                this.channel = null
                this.owner = null
                this.$message('登出成功')
            },
            // 发送消息
            sendMessage: function () {
                var msgBody = {
                    cmd: 'chart',
                    from: this.owner,
                    message: this.toSendMessage
                }
                this.channel.send(JSON.stringify(msgBody))
                this.toSendMessage = ''
            },
            // 连接
            connect: function ({uri: uri, onMessage: onMessage, onOpen: onOpen, onError: onError, onClose: onClose}) {
                var ws = new WebSocket(uri)
                ws.onmessage = onMessage
                ws.onopen = onOpen || function (e) {console.log(e.data)}
                ws.onerror = onError || function (e) {console.log('ws通讯错误')}
                ws.onclose = onClose || function (e) {console.log('ws通道关闭')}
                return ws
            }
        }
    })
</script>
</html>